import React from "react";
import { request } from "../../server/request";
import "./style.css";
import { Popup, Button, Input, Form } from "react-vant";
class List extends React.Component {
  state = {
    list: [],
    visible: false,
  };
  async componentDidMount() {
    const resp = await request.get("/api/list");
    this.setState({
      list: resp.data.data,
    });
  }

  onFinish(values) {
    const { list } = this.state;
    // 发布数据
    this.setState({
      list: [
        {
          ...values,
          id: Math.random().toString().slice(2),
        },
        ...list,
      ],
      visible: false
    });
    console.log(values)
  }
  render() {
    const { list, visible } = this.state;
    return (
      <div>
        {list.map((v) => {
          return (
            <dl key={v.id}>
              <dd>
                <h3>{v.title}</h3>
              </dd>
              <dt>
                <div>{v.desc}</div>
                <img src={v.image} alt="" width={120} height={80} />
              </dt>
            </dl>
          );
        })}

        <Button onClick={() => this.setState({ visible: true })}>+</Button>
        <Popup
          visible={visible}
          onClose={() => this.setState({ visible: false })}
        >
          <div style={{ width: '100vw' }}>
            <Form
              onFinish={(values) => this.onFinish(values)}
              footer={
                <div style={{ margin: "16px 16px 0" }}>
                  <Button round nativeType="submit" type="primary" block>
                    提交
                  </Button>
                </div>
              }
            >
              <Form.Item
                rules={[{ required: true, message: "请填写标题" }]}
                name="title"
                label="标题"
              >
                <Input placeholder="请输入标题" />
              </Form.Item>
              <Form.Item
                rules={[{ required: true, message: "请填写图片" }]}
                name="image"
                label="图片"
              >
                <Input placeholder="请输入图片" />
              </Form.Item>
              <Form.Item
                rules={[{ required: true, message: "请填写描述" }]}
                name="desc"
                label="描述"
              >
                <Input placeholder="请输入描述" />
              </Form.Item>
            </Form>
          </div>
        </Popup>
      </div>
    );
  }
}

export default List;
